<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script th:src="@{/js/watermark.js}"></script>
<script th:src="@{/js/compress.js}"></script>
<body>
<input type="file" id="imageFile" accept="image/*">
<button onclick="compress()">压缩</button>
<img src="" alt="" id="compressedImage" >
<script>
    // 使用示例
    function compress() {
        const imageFileInput = document.getElementById('imageFile');
        const file = imageFileInput.files[0];

        if (!file) {
            alert('请先选择图片！');
            return;
        }

        compressImage(file, 800, 800)
            .then(blob => {
                const url = URL.createObjectURL(blob);
                // 设置img标签的src属性以显示图片
                document.getElementById('compressedImage').src = url;
            })
            .catch(e => {
                console.log(e)
            })

    }

</script>
</body>
</html>